<!-- 语言国际化 -->
<template>
  <!-- 下拉菜单 选择中英文-->
  <el-dropdown class="international" trigger="click" @command="handleSetLanguage">
    <div>
      <el-tooltip :effect="effect" content="国际化">
         <span id="guide-lang" class="icon iconfont icon-zhongyingwenyingwen"></span>
        <!-- <el-icon><ChromeFilled /></el-icon> -->
      </el-tooltip>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <!-- 判断当前选中的i18n是 en(英文) 还是(zh)中文来决定是否经禁止点击 -->
        <el-dropdown-item :disabled="store.getters.language === 'zh'" command="zh">中文</el-dropdown-item>
        <el-dropdown-item :disabled="store.getters.language === 'en'" command="en">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup>
import {useStore} from 'vuex'
import {defineProps} from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'

defineProps({
  effect:{
    type:String,
    default:"dark",
    // 自定义校验
    validator:function(value){
      return ['dark','light'].indexOf(value) !== -1
    }
  }
})

const store = useStore()

//点击时间切换语言的方法  这里的lang是dropdown组件的回调参数 接收的是el-dropdown-item中command绑定的值
const i18n = useI18n()
const handleSetLanguage = (lang) =>{
  //切换 i18n 的locale locale等于zh 或者en
  i18n.locale.value = lang
  //修改 vuex 中保存的 language
  store.commit('app/setLanguage',lang)
  // 修改完毕给对应的提示
  //使用i18n的t方法msg.toast.switchLangSuccess这个提示的内容在i18n文件夹中的lang中en或zh中
  ElMessage.success(i18n.t('msg.toast.switchLangSuccess'))
}
</script>


<style lang='scss' scoped>
.icon{
  font-size: 28px;
}
</style>